<template>
	<div>
		<div class="header">
			<div class="haedNav">
				<div class="navLogo">
					<img src="../assets/images/login.png">
				</div>
				<!-- 导航 -->
				<div class="navList">
					<div class="navItem" v-for="item in navList" :key="item.id" @click="ClickOnNav(item.id)">
						<svg class="icon navIcon" aria-hidden="true">
							<use :xlink:href="item.navIcon"></use>
						</svg>
						<div class="navText">{{item.navText}}</div>
					</div>
					<div class="navItem" @click="goToLogin">
						<svg class="icon navIcon" aria-hidden="true">
							<use xlink:href="#icon-icon_login"></use>
						</svg>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹窗  赞赏 -->
		<div v-show="popup" @click="closepopup">
			<!--这里是要展示的内容层-->
			<div class="modeCont">
				<div class="imgList">
					<div class="item">
						<img class="modeImg" src="../assets/images/RewardCode.png" >
					</div>					
					<div class="item">
						<img class="modeImg" src="../assets/images/RewardCode2.png" >
					</div>
				</div>
				<div class="text">
					服务器和域名等服务的购买和续费都会产生一定的费用，为了维持项目的正常运作，如果觉得本项目对您有帮助的话，欢迎朋友能够给予一些支持，肥菇凉将用于提升服务器配置，感谢小伙伴们的支持！<br>
					<span>（ ps: 小伙伴赞赏的时候可以备注一下下~）</span>
				</div>
			</div>
			<!--这里是半透明背景层-->
			<div class="over"></div>
		</div>
		<!-- 弹窗  赞赏 -->
	</div>
</template>
<script>
	import {} from '../assets/font/iconfont.js'
	export default {
		name: 'Header',
		data() {
			return {
				popup: 0,
				navList: [
					{
						id: 1,
						navText: '首页',
						navIcon: '#icon-icon_inde'
					},
					{
						id: 2,
						navText: '归档',
						navIcon: '#icon-icon_file'
					},
					{
						id: 3,
						navText: '标签',
						navIcon: '#icon-icon_mark'
					},
					{
						id: 4,
						navText: '分类',
						navIcon: '#icon-icon_sort'
					},
					{
						id: 5,
						navText: '关于',
						navIcon: '#icon-icon_about1'
					},
					{
						id: 6,
						navText: '打赏',
						navIcon: '#icon-icon_reward'
					},
					{
						id: 7,
						navText: '友链',
						navIcon: '#icon-icon_link'
					},
				],
			}
		},
		methods: {
			closepopup() {	//关闭活动规则页面
				this.popup = 0;
			},
			ClickOnNav(e) {
				switch (e) {
					case 2:
						this.$router.push("/Archive"); // 跳转至归档
						break;
					case 3:
						this.$router.push("/Label"); // 跳转至标签
						break;
					case 4:
						this.$router.push("/Classify"); // 跳转至分类
						break;
					case 5:
						this.$router.push("/About"); // 跳转至关于
						break;
					case 6:
						this.popup = 1;
						break;
					case 7:
						this.$router.push("/Friend"); // 跳转至友链
						break;
					default:
						this.$router.push("/Index"); // 跳转至首页
				}
			},
			goToLogin(){
				this.$router.push({path:'/Backindex'})
			}
		},
	}
</script>
<style>
	@import url("../assets/css/style.css");
	@media screen and (max-width:580px) {
		.header .haedNav .navLogo {
			width: 100%;
			margin: 16px 0 -10px 0;
			float: none;
		}

		.header .haedNav .navList {
			width: 100%;
		}

		.header .haedNav .navList .navItem {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.header .haedNav .navList .search,
		.header .haedNav .navList .navItem .navIcon {
			display: none;
		}
	}
	@media screen and (min-width: 581px) and (max-width:880px) {
		.header .haedNav .navLogo {
			width: 100%;
			margin: 16px 0 -10px 0;
			float: none;
		}

		.header .haedNav .navList {
			width: 100%;
			float: none;
			justify-content: center;
		}
	}
</style>
